<template>
  <div class="app-container calendar-list-container"
       id="admin-manage"
       v-loading.fullscreen="isLoading"
       element-loading-background="rgba(0, 0, 0, 0.6)"
  >

    <div class="create">
      <el-button class="create-btn"
                 @click="handleUpdateAdminInfo"
                 type="primary"
                 icon="el-icon-edit"
                 style="margin-bottom: 10px"
                 v-waves
      >修改个人信息</el-button>

    </div>

    <el-form :model="info" ref="info" >
      <el-form-item label="用户名" prop="">
        <el-input v-model="info.account" type="text" readonly>
        </el-input>
      </el-form-item>
      <el-form-item label="手机" prop="">
        <el-input v-model="info.phone" type="text" readonly>
        </el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="">
        <el-input v-model="info.email" type="text" readonly>
        </el-input>
      </el-form-item>
    </el-form>

    <update-dialog :updateTemp="updateTemp"
                     :dialogVisible="dialogVisible"
                     @cancel="dialogVisible = false"
                     @update="updateInfoData"
    ></update-dialog>

  </div>
</template>

<script>
  import { modifyInfo } from '@/api/user'
  import UpdateDialog from './components/UpdateDialog'
  import waves from '@/directive/waves/index.js'

  export default {
    components: {
      UpdateDialog
    },
    data() {
      return {
        info: {},
        isLoading: false,
        dialogVisible: false,
        updateTemp: {}
      }
    },
    directives: {
      waves
    },
    created() {
      this.info = this.$store.state.user
    },
    methods: {
      getInfo() {
        this.$store.dispatch('GetInfo').then(() => {
          this.info = this.$store.state.user
        })
      },
      handleUpdateAdminInfo() {
        this.updateTemp = Object.assign({}, this.info) // copy obj
        this.dialogVisible = true
      },
      updateInfoData() {
        this.isLoading = true
        modifyInfo(this.updateTemp).then(res => {
          this.isLoading = false
          if (res.code === 'E0000') {
            this.dialogVisible = false
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.getInfo()
          }
        })
      }
    }
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }

</style>
